﻿<html><body> <p>Note: this document is written intentionally close to <a href="https://reactjs.org/docs/rendering-elements.html">ReactJS/Rendering-Elements</a>&nbsp;article to highlight differences and similarities with ReactJS.</p>
	<h2>Rendering Elements</h2>
	<p>Reactor's virtual DOM element is a definition of real DOM element. At some point real DOM element will be created using virtual one as a prototype. </p>
	
	<pre>const velement = &lt;h1&gt;Hello, world&lt;/h1&gt;;</pre><p>Unlike physical DOM elements, Reactor elements are plain script <a href="../script/Tuple.htm">tuples</a>, and are cheap to create. <a href="../script/language/ssx.htm#dom-methods-vdom">Dedicated Sciter's DOM methods</a>&nbsp;take care of updating the DOM to match such virtual elements.</p>
	<h2>Rendering an Element into the DOM</h2>
	<p>Let’s say there is a <code>&lt;div&gt;</code> somewhere in your HTML file:</p>
	
	<pre>&lt;div id=&quot;root&quot;&gt;&lt;/div&gt;</pre><p>Let's call this a &quot;root&quot; DOM node - everything inside it will be managed by Reactor.</p>
	<p>Applications that use Reactor may have as a single root DOM node as many isolated root DOM nodes - whatever is required. And you can mix Reactor managed elements with elements managed by other means, e.g. scripting behavioral classes.</p>
	<p>To render a Reactor element into a root DOM node, call <code>element.merge(velement)</code> method:</p>
	
	
	<pre>const velement = &lt;div id=&quot;root&quot;&gt;&lt;h1&gt;Hello, world&lt;/h1&gt;&lt;/div&gt;;
$(div#root).merge(velement);</pre><p>That above will display &quot;Hello, world&quot; text inside that <code>&lt;h1&gt;</code> element.</p>
	<h2 id="updating-the-rendered-element">Updating the Rendered Element</h2><p>To update already rendered element we simply call <code>element.merge(velement)</code> again on it with changed velement. The <code>Element.merge()</code> native function will patch that existing DOM element by new velement&nbsp;definition.</p>
	<p>Consider&nbsp;this ticking clock example:</p>
	<pre>function tick() {
  const velement = 
    &lt;div id=&quot;root&quot;&gt;
      &lt;h1&gt;Hello, world!&lt;/h1&gt;
      &lt;h2&gt;It is {new Date().toLocaleString(#time)}.&lt;/h2&gt;
    &lt;/div&gt;;
  $(div#root).merge(velement);
  return true; // to keep timer running
}

self.timer(1s, tick);</pre>
	<p>Code above will call <code>tick()</code> function every second. And the tick will update the &lt;div&gt; element.</p>
	<p>Check sample at <u>{sdk}/samples/+reactor/doc-samples/rendering/clock.htm</u> in sciter.exe.</p>
	<h2>Element.merge() only updates what is necessary</h2>
	<p>The <code>Element.merge()</code> function compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.</p>
	<p>Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by <code>Element.merge()</code>.</p>
	<p>Therefore Reactor (<code>merge()</code> method in particular) allows to define single rule of how the UI should look at any given moment rather than how to change it over time.</p>
	</body></html>